[JavaScript] 브라우저 렌더링 과정

✅ 브라우저 렌더링 과정

📌 렌더링이란?

JavaScript를 공부하면서 <script>의 삽입 위치에 따라 코드가 제대로 작동 안할 수도 있다는 사실을 알았는데 이게 브라우저 렌더링 과정과 깊은 연관이 있다고 하여 이에 대해 확실하게 알아두고 넘어갈 필요성이 느껴져 관련 포스팅을 한다.

브라우저는 서버와의 통신 이후, 데이터를 사용자에게 보여주기 위해 렌더링 이라는 과정을 수행한다.

웹 페이지는 사용자에게 보여질 때 미리 만들어져 있는 페이지를 가져오는게 아니라 실시간으로 그려지는 것에 가깝다. 실시간으로 웹사이트가 그려지는 과정, 이 과정을 웹 브라우저의 렌더링 이라고 말한다.

대부분의 웹 브라우저는 두개의 엔진이 들어가 있다. 하나는 렌더링 엔진으로 사용자가 볼 화면을 그려내는 역할을 수행하고 다른 하나는 자바스크립트 엔진으로 자바스크립트 코드를 읽어내 기능을 수행하는 역할을 한다.

렌더링 엔진은 HTML, CSS, JavaScript 세가지 언어를 가지고 웹사이트의 소스코드를 읽어, 실제 어떤 요소들이 어떤 크기, 너비로 배치되는지, 텍스트의 크기는 어떠한지, 색상은 어때야 하는지 등을 계산해 실시간으로 그려준다.

이러한 렌더링 엔진이 수행하는 일련의 과정을 렌더링이라고 한다.

📌 브라우저 렌더링 동작 과정

그렇다면 렌더링은 어떻게 동작하는지 알아보도록 하겠다.

1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다 ( Parsing )

브라우저가 페이지를 렌더링하려면 가장 먼저 HTML 파일을 해석해야 한다. Parsing 단계는 HTML 파일을 해석하여 DOM ( Document Object Model ) Tree를 구성하는 단계이다.

또한 HTML에 CSS에 포함되어 있다면 CSSOM(CSS Object Model) Tree도 함께 구성한다.

1. 두 Tree를 결합하여 Rendering Tree를 만든다 ( Style ) Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜 Rendering Tree를 구성한다. Rendering Tree는 실제로 화면에 그려질 Tree이다.

1. Rendering Tree에서 각 노드의 위치와 크기를 계산한다 ( Layout ) Rendering Tree의 루트노드부터 모든 노드를 순회하며 노드의 정확한 크기와 위치를 계산하고 Rendering Tree에 반영한다. 이를 통해 각 요소의 정확한 위치를 구체화 한다.

1. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다 ( Paint)

1. 레이어를 합성하여 실제 화면에 나타낸다 ( Composite )

✅ 마무리

브라우저 렌더링 과정을 살펴봄으로써 웹 페이지가 어떻게 생성되는지 알 수 있었다. 이런 과정을 하나하나 알아가며 동작 원리를 파악하는게 웹 개발을 하는데 있어 도움이 많이 된다고 생각한다.